<template>
	<!-- 添加图表卡 start -->
	<md-dialog :md-active.sync="isShowDialog">
		<md-dialog-title>{{getLangText(label.addCard)}}</md-dialog-title>
		<md-dialog-content>
			<md-field>
				<label>{{getLangText(label.searchKey)}}</label>
				<md-input v-model="searchKey"></md-input>
				<md-button class="md-icon-button" @click="searchChart">
					<i class="iconfont iconsearch"></i>
				</md-button>
			</md-field>
			<div style="height:400px;overflow-x:hidden;overflow-y:auto;width:800px;">
				<div v-for="(item,idx) in searchChartList" @click="selectChart(idx)">
					<md-card
						:key="idx"
						:class="[selectSearchId==idx?'md-accent':'']"
						v-show="searchChartList.length>0"
						style="margin:4px;"
					>
						<md-card-header style="display:flex;align-items:center;">
							<span
								class="md-title"
								style="display:inline-flex;align-items:center;margin:0;"
							>{{item.title}}</span>
							<span
								class="md-body-1"
								style="margin-left:16px;display:inline-flex;align-items:center;height:40px;flex:1;"
							>ID:{{item.chart_id}}</span>
							<span>
								<md-button class="md-icon-button" @click="showDetail(item)">
									<i class="iconfont iconPencil"></i>
								</md-button>
							</span>
						</md-card-header>

						<md-card-actions md-alignment="space-between">
							<span class="md-body-1">{{getLangText(chartTypeList[item.chart_type])}}</span>
							<span class="md-caption">{{item.update_time}}</span>
						</md-card-actions>
					</md-card>
				</div>
				<div class="list-nodata" v-if="searchChartList.length==0&&!isFail">{{getLangText(label.nodata)}}</div>
				<div class="list-nodata" v-if="searchChartList.length==0&&isFail" style="color:red;">{{getLangText(label.searchFail)}}</div>
			</div>
		</md-dialog-content>

		<md-dialog-actions>
			<md-button class="md-primary md-raised" @click="closeDialog">{{getLangText(label.no)}}</md-button>
			<md-button class="md-accent md-raised" @click="doAddCard">{{getLangText(label.ok)}}</md-button>
		</md-dialog-actions>
	</md-dialog>
	<!-- 添加图表卡 end -->
</template>

<script>
import ChartTypes from '@/components/data/chartType.js';
	export default {
		name: "SearchChartDialog",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data: () => ({
			label: {
				ok: { zh: "确定", en: "OK" },
				no: { zh: "取消", en: "cancel" },
				addCard: { zh: "添加图表卡", en: "Add Chart Card" },
				nodata: { zh: "暂无搜索结果", en: "no search data" },
				searchKey: { zh: "搜索图表关键词", en: "search key of chart" },
				searchFail: { zh: "搜索失败！", en: "Fail to search!" }
			},
			isShowDialog:false,
			searchKey: "",//搜索关键词
			searchChartList: [],//搜索图表结果
			selectSearchId: 0,//选中搜索结果index
			isFail:false,//是否搜索失败
			chartTypeList:ChartTypes//图表类型
			
		}),
		watch:{
			isShow(){
				if(this.isShow){
					this.isShowDialog=true;
				}else{
					this.isShowDialog=false;
					this.$emit('update:isShow',false);
				}
			},
			isShowDialog(){
				this.$emit('update:isShow',this.isShowDialog);
			}
		},
		methods: {
			//跳转到图表编辑界面
			showDetail(item) {
				window.open(
					window.location.origin +
						window.location.pathname +
						"#/charteditor?chartId=" +
						item.chart_id
				);
			},
			//选中图表
			selectChart(idx) {
				this.selectSearchId = idx;
			},
			closeDialog(){
				this.$emit('update:isShow',false);
			},
			//搜索图表
			searchChart() {
				var that = this;
				$.post(
					this.API.searchChart,
					{
						userId: JSON.parse(window.localStorage.getItem("carweb_user")).userId,
						key: encodeURI(this.searchKey)
					},
					function(res) {
						if (res.errCode == 0) {
							for (var i = 0; i < res.data.length; i++) {
								res.data[i].title = decodeURI(res.data[i].title);
							}
							that.searchChartList = res.data;
							that.isFail = false;
						} else {
							
							that.isFail = true;
						}
					}
				);
			},
			doAddCard() {
				var item=this.searchChartList[this.selectSearchId];
				this.$emit(
					"dialog-ok",
					item.chart_id
				);
				this.$emit('update:isShow',false);
			}
		},
		mounted() {}
	};
</script>